<template>
  <div class="layout-detail-baseInfo-wrapper">
    <div class="layout-left-wrapper">
      <CustomSwiper :img-list="imgList" />
    </div>

    <div class="layout-right-wrapper">
      <div class="info-top">
        <div class="name">{{ name }}</div>
        <div class="belongDistrictLabel">
          <i class="el-icon-location-information" /> 所在区县：{{ belongDistrictLabel }}
        </div>
        <div class="item-tags">
          {{ addrs }}
          <!-- <div v-for="item in tags" :key="item" class="item-tag">{{ item }}</div> -->
        </div>
      </div>

      <div class="info-center">
        <LabelValueUnit
          v-for="item in baseInfoList"
          :key="item.label"
          :label="item.label"
          :value="item.value"
          :unit="item.unit"
          :mode="Mode.TB"
        />
      </div>
      <div class="info-bottom">
        <slot name="desc">
          <ParkPortrait label="园区画像" :tags="parkPortraitTags" />
        </slot>

        <div class="phone">{{ phone }}</div>
        <div class="tow-btns space-x-2">
          <el-button class="w-[170px]" type="primary" @click="handleEnter">入驻园区</el-button>
          <el-popover placement="top-start" title="" width="200" trigger="click">
            <img class="w-[200px] h-[200px]" src="@/assets/img/card_demo.png" />
            <el-button slot="reference" class="w-[170px]">园区名片</el-button>
          </el-popover>
        </div>
      </div>
    </div>

    <div class="vr-map">
      <!-- <VRLink v-if="vrLink" :url="vrLink" /> -->
      <InvestMap />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import CustomSwiper from '@/components/portal/CustomSwiper2.vue'
import LabelValueUnit, { Mode } from '@/components/portal/LabelValueUnit.vue'
// import LabelDesc from '@/components/portal/LabelDesc.vue'
import ParkPortrait from '@/components/portal/park/ParkPortrait.vue'
// import VRLink from '@/components/portal/VRLink.vue'
import InvestMap from '@/components/portal/InvestMap.vue'
export default Vue.extend({
  components: { CustomSwiper, LabelValueUnit, ParkPortrait, InvestMap },
  props: {
    dataObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return { Mode }
  },
  head: {
    title: '基础信息',
  },
  computed: {
    imgList() {
      const imgList = this.dataObj.imgList
      const videoList = this.dataObj.videoList
      const vrLink = this.dataObj.vrLink
      let list = []
      if (vrLink) {
        list = [{ url: vrLink, type: 'vr' }]
      }

      if (videoList && videoList.length > 0) {
        list = [
          ...list,
          ...videoList.map((d) => {
            d.type = 'video'
            return d
          }),
        ]
      }

      if (imgList && imgList.length > 0) {
        list = [...list, ...imgList]
      }

      return list.length > 0 ? list : undefined
    },
    vrLink() {
      return this.dataObj.vrLink
    },
    addrs() {
      return this.dataObj.addrs
    },
    name() {
      return this.dataObj.name
    },
    belongDistrictLabel() {
      const label = this.dataObj.belongDistrictLabel
      return (label && label.join('')) || '--'
    },
    tags() {
      const { levelLabel, typeLabel, economicTypeLabel } = this.dataObj
      const arr = []
      levelLabel && arr.push(levelLabel)
      typeLabel && arr.push(typeLabel)
      economicTypeLabel && arr.push(economicTypeLabel)
      return arr
    },
    parkPortraitTags() {
      const { carrierLabel, customIndustry, customTag } = this.dataObj
      let arr = []
      if (Array.isArray(carrierLabel)) {
        arr = arr.concat(carrierLabel)
      } else if (typeof carrierLabel === 'string') {
        arr.push(carrierLabel)
      }

      if (customIndustry) {
        arr = [...arr, ...customIndustry]
      }

      if (customTag) {
        arr = [...arr, ...customTag]
      }
      return arr
    },
    baseInfoList() {
      const { typeLabel, stats, infrastructureLabel, planArea } = this.dataObj
      const arr = [
        {
          label: '园区类型',
          value: '--',
          unit: '',
        },
        {
          label: '入驻企业数',
          value: '--',
          unit: '家',
        },
        {
          label: '基础设施',
          value: '--',
          unit: '',
        },
        {
          label: '规划面积',
          value: '--',
          unit: '平方公里',
        },
      ]

      typeLabel && (arr[0].value = typeLabel)
      stats && stats.enterCpyCount && (arr[1].value = stats.enterCpyCount)
      arr[2].value = infrastructureLabel || '八通一平'
      planArea && (arr[3].value = planArea)

      return arr
    },
    desc() {
      return this.dataObj.parkAdvantage || '--'
    },
    phone() {
      return this.dataObj.manageDepartmentPhone
    },
  },
  mounted() {},
  methods: {
    handleEnter() {
      this.$router.push('/siteSelection')
    },
  },
})
</script>
<style lang="scss" scoped>
.layout-detail-baseInfo-wrapper {
  @apply bg-white rounded-md p-[20px] flex relative;

  .layout-right-wrapper {
    @apply pl-[40px] flex-1;

    .info-top {
      @apply border-b-[1px] border-[#e2e4ee] h-[131px] flex flex-col justify-between pb-[23px];

      .name {
        @apply text-[#40445D] text-[24px] leading-[32px];
      }

      .belongDistrictLabel {
        @apply text-[#898FAA];
      }

      .item-tags {
        @apply flex space-x-4;

        .item-tag {
          @apply bg-[#e5f0ff] py-1 px-4 text-[#006eff]  rounded-[4px];
        }
      }
    }

    .info-center {
      @apply h-[84px] flex items-center justify-between;
      border-bottom: 1px solid #e2e4ee;
    }

    .info-bottom {
      @apply h-[205px] flex flex-col justify-between pt-[20px];

      .phone {
        @apply text-[#FFA800] text-[24px] font-semibold;
      }
    }
  }

  .vr-map {
    position: absolute;
    top: 10px;
    right: 20px;
    display: flex;
  }
}
</style>
